<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    p
    {
        font-size: 20px;
    }
    /*
    伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）
    伪元素使用::开头
    ::first-letter表示第一个字母
    ::first-line表示第一行
    ::selection表示选中的内容
    ::before元素的开始位置
    ::元素的最后位置
    before和after必须结合content属性来使用
    */
    p::first-letter
    {
        font-size: 50px;
    }
    p::first-line
    {
        background-color:blue;
    }
    p::selection
    {
        background-color: yellow;
    }
    
    div::before
    {
        content: "abc";/*这样的话，会在Hello前面多出一个abc*/
        color: red;
    }
    div::after
    {
        content: "haha";/*这样的话，会在结尾多出一个haha*/
        color: blue;
    }
    /*但是这两种方法添加的文本不能被选中*/
    div::before
    {
        content: "『";
    }
    div::after
    {
        content:"』";
    }
    /*这种文本添加位置锁死是开头和结尾*/
    </style>
</head>
<body>
    <div>Hello Hello How are you</div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi nesciunt quibusdam optio eius numquam cupiditate at autem. Impedit quas eius quasi, illo, et odio nulla expedita, provident iusto magni eligendi.
    </p>
</body>
</html>